.box-card {
  width: 360px;
  height: calc(100vh - 100px);
  font-family: PingFangSC-Regular, PingFang SC;

  .clearfix {
    width: 100%;
    .title {
      position: relative;
      font-size: 14px;
      font-weight: 400;
      padding-left: 20px;
      .iconxianxing-zuo {
        position: absolute;
        cursor: pointer;
        font-size: 12px;
        top: -11px;
        left: 2px;
      }
    }
    .addScheme {
      float: right;
      cursor: pointer;
      font-size: 14px;
      font-weight: 400;
    }
  }
  .content {
    color: white;
    .dividing_line {
      width: 21px;
      height: 2px;
      margin-bottom: 10px;
      background: linear-gradient(
        90deg,
        #69B3FF 0%,
        #69B3FF 100%,
        #69B3FF 100%
      );
      border-radius: 2px;
    }
    .box {
      width: 100%;
      height: 76px;
      border-bottom: 1px solid rgba(237, 249, 255, 0.2);
      margin-bottom: 15px;
      .tips {
        width: 150px;
        height: 14px;
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 14px;
        margin-bottom: 10px;
      }
      .label {
        width: 112px;
        height: 14px;
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 14px;
        margin-bottom: 10px;
      }
      .draw-button-box {
        height: 36px;
        display: flex;
        justify-content: space-between;
        .draw-btn {
          height: 36px;
          width: 154px;
          height: 36px;
          background: rgba(14, 26, 42, 0.8);
          border-radius: 4px;
          color: #fff;
          line-height: 36px;
          font-size: 14px;
          text-align: center;
          cursor: pointer;
          border: 1px solid rgba(255, 255, 255, 0.5);
          .btn-text {
            display: inline;
            padding-top: 2px;
            margin-left: 8px;
          }
        }
      }
    }
    .setting {
      width: 100%;
      color: white;
      .tips {
        width: 112px;
        height: 14px;
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 14px;
      }
      // height: 76px;
      .planningFrom {
        .house-select {
          position: absolute;
          right: 2px;
          top: 10px;
          color: #69B3FF;
          cursor: pointer;
        }

        .house {
          position: relative;
          .housebg {
            width: 324px;
            height: 36px;
            background: #ffffff;
            opacity: 0.09;
          }

          .houselabel {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            width: 70px;
            height: 20px;
            font-size: 14px;
            margin: auto;
          }
        }
        .selectedHouse {
          width: 212px;
          height: 85px;
          background: rgba(255, 255, 255, 0.09);
          display: inline-flex;
          img {
            width: 92px;
            height: 61px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            margin: 12px 16px 0px 16px;
          }
          .cont {
            padding-top: 23px;
          }
        }
      }
    }
    .create {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #69B3FF;
      width: 324px;
      height: 36px;
      background: rgba(105, 179, 255, 0.1);
      border-radius: 4px;
      border: 1px solid #69B3FF;
      line-height: 36px;
      text-align: center;
      cursor: pointer;
    }
  }
  .buildingAdjustment {
    position: fixed;
    width: 360px;
    right: 20px;
    top: 80px;
    border-radius: 5px;
    border: 1px solid #69B3FF;
    background-color: rgba(14, 26, 42, 0.8);
    z-index: 2;
    height: calc(100vh - 100px);
    transition: all 0.6s;
    .foot {
      position: absolute;
      bottom: 0px;
      width: 100%;
      height: 56px;
      background-color: rgba(14, 26, 42, 0.8);
      padding-top: 10px;
      .btn-redraw {
        height: 36px;
        background: rgba(14, 26, 42, 0.8);
        border-radius: 4px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        color: white;
        text-align: center;
        line-height: 36px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        cursor: pointer;
      }
      .btn-save {
        height: 36px;
        background: rgba(105, 179, 255, 0.1);
        border-radius: 4px;
        border: 1px solid #69B3FF;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #69B3FF;
        line-height: 36px;
        text-align: center;
        cursor: pointer;
      }
    }
    .line {
      position: absolute;
      top: 38px;
      width: 360px;
      height: 2px;
      background: rgba(6, 240, 248, 0.2);
    }
    .panel {
      margin-top: 12px;
      .icon {
        border-left: 2px solid #69B3FF;
        width: 52px;
        padding: 0px 0px 0px 10px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #69B3FF;
      }
      .roofimg {
        cursor: pointer;
        img {
          width: 69px;
          height: 69px;
          float: left;
          cursor: pointer;
        }
        i {
          position: absolute;
          top: -5px;
          right: 13px;
          color: #69B3FF;
        }
        .selectmap {
          border: 1px solid #69B3FF;
        }
      }
    }
    .model_imge {
      img {
        background: transparent !important;
        border-radius: 4px !important;
        border: 1px solid #ffffff !important;
      }
    }
    .operation-tips {
      position: absolute;
      left: -50px;
      top: 6px;
      width: 32px;
      height: 32px;
      background: rgba(14, 26, 42, 0.8);
      border-radius: 50%;
      cursor: pointer;
      i {
        color: #69B3FF;
        padding: 4px;
        font-size: 24px;
        line-height: 32px;
      }
    }
    .operation-shrink {
      position: absolute;
      left: -18px;
      top: 42vh;
      width: 18px;
      height: 44px;
      background: rgba(14, 26, 42, 0.8);
      border-radius: 4px 0px 0px 4px;
      opacity: 0.6;
      cursor: pointer;
      i {
        padding: 4px;
        color: #ffffff;
        font-size: 12px;
        line-height: 46px;
        &:hover {
          padding: 3px;
          font-size: 14px;
        }
      }
    }
    .tips-panel {
      position: absolute;
      left: -320px;
      top: 6px;
      // transition: all 0.6s;
    }
  }
  .shrinkAdjustment {
    width: 0px;
    right: -2px;
    transition: all 0.6s;
  }
  .bottom-result {
    width: 100%;
    position: fixed;
    z-index: -1;
    left: 0px;
    bottom: 0px;
    height: 60px;
    background: linear-gradient(
      0deg,
      rgba(14, 26, 42, 0.6) 0%,
      rgba(14, 26, 42, 0.4) 52%,
      rgba(14, 26, 42, 0) 100%
    );
    line-height: 70px;
    text-align: center;
    span {
      font-size: 13px;
      margin: 0px 5px 0px 5px;
      color: white;
    }
  }
  .bottom-panel {
    position: fixed;
    z-index: 2;
    left: 400px;
    bottom: 60px;
    width: 200px;
    height: 266px;
    background: rgba(13, 25, 42, 0.8);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 10px;
    .title {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #69B3FF;
    }
    .list {
      color: white;
      display: inline-flex;
      .label {
        width: 100px;
        margin: 7px 0px;
        text-align: right;
      }
      .val {
        height: 30px;
        line-height: 36px;
      }
      .hActive {
        color: red !important;
      }
    }
  }
  .dialog-btn {
    width: 100%;
    height: 32px;
    background: rgba(14, 26, 42, 0.8);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    line-height: 30px;
    cursor: pointer;
  }
  .dialog-btn-conf {
    width: 100%;
    height: 32px;
    background: rgba(105, 179, 255, 0.1);
    border-radius: 4px;
    border: 1px solid #69B3FF;
    color: #69B3FF;
    line-height: 30px;
    cursor: pointer;
  }
  .dialog-content {
    color: white;
    text-align: center;
    padding: 6px;
  }
  .dialog-line {
    position: absolute;
    bottom: 66px;
    left: 0px;
    right: 0px;
    width: 320px;
    height: 1px;
    background: rgba(237, 249, 255, 0.2);
    margin: auto;
  }
}

::v-deep .el-input__inner {
  text-align: left;
}

::v-deep .el-form .el-form-item__label {
  color: #fff;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}
::v-deep .el-form--label-top .el-form-item__label {
  padding: 0px;
}

::v-deep .el-card {
  border: none;
  .el-card__body {
    padding: 5px 15px 5px 15px;
  }
}

::v-deep .el-form .el-form-item,
.el-form .el-form-item--small.el-form-item {
  margin-bottom: 0px;
}
::v-deep .el-input .el-input__inner {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fff;
  background: rgba(14, 26, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}
::v-deep .el-input.is-disabled .el-input__inner {
  background: rgba(14, 26, 42, 0.8) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

::v-deep .el-switch__core {
  width: 48px !important;
  height: 22px;
  border-color: #8b929a !important;
  background: #8b929a !important;
  &::after {
    width: 18px;
    height: 18px;
    top: 0px;
    left: 0px;
    margin: 1px;
    background: #fff;
  }
}
::v-deep .el-switch.is-checked .el-switch__core::after {
  background: #fff;
  margin-left: -19px !important;
}

::v-deep .el-switch.is-checked .el-switch__core {
  border-color: #69B3FF !important;
  background: #69B3FF !important;
}

::v-deep .el-tabs {
  color: white;
  background: transparent;
}
::v-deep .el-tabs .el-tabs__header .el-tabs__nav .el-tabs__item.is-active {
  position: relative;
  color: #69B3FF;
  border: none;
  border-bottom: 2px solid #69B3FF;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}
::v-deep .el-tabs .el-tabs__header .el-tabs__nav .el-tabs__item {
  background-color: transparent;
}
::v-deep .el-tabs .el-tabs__header .el-tabs__nav .el-tabs__item {
  color: #69B3FF;
  border-bottom: none;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  padding: 0px 0px 0px 0px;
  margin: 0px 16px 0px 16px;
}
::v-deep .el-collapse .el-collapse-item .el-collapse-item__header {
  background: transparent;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #69B3FF;
  padding: 0 12px;
}
::v-deep .el-collapse .el-collapse-item .el-collapse-item__wrap {
  padding: 0px;
}
::v-deep .el-collapse .el-collapse-item .el-collapse-item__header.is-active {
  border: none;
}
::v-deep .el-collapse .el-collapse-item {
  border: none;
}
::v-deep .el-dialog__wrapper .el-dialog .el-dialog__header {
  background: transparent;
  border-bottom: 1px solid rgba(13, 237, 245, 0.5);
}
::v-deep .el-dialog__wrapper .el-dialog .el-dialog__header .el-dialog__title {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #69B3FF;
}
::v-deep
  .el-dialog__wrapper
  .el-dialog
  .el-dialog__header
  .el-dialog__headerbtn
  .el-dialog__close {
  color: #69B3FF;
}
::v-deep .el-dialog__wrapper .el-dialog {
  background: rgba(14, 26, 42, 0.8);
}
::v-deep .el-dialog__wrapper .el-dialog .el-dialog__footer {
  padding: 16px 0px 16px 0px;
}
